
// 父文档编辑框
initEditor();

// 页面处理，获取分类
axios.get('/my/category/list')
  .then(res => {
    // console.log(res);
    let { data, status } = res.data
    if (status === 0) {
      let str = ''
      data.forEach(item => {
        str += `<option value="${item.id}">${item.name}</option>`
      });
      $('select[name=cate_id]').append(str);
      let form = layui.form
      form.render('select')
    }
  })

// 图片裁剪并添加
// - 找到剪裁区的图片 （img#image）
var $image = $('#image');
// - 设置配置项
var option = {
  // 纵横比(宽高比)
  aspectRatio: 400 / 200, // 正方形
  // 指定预览区域
  preview: '.img-preview' // 指定预览区的类名（选择器）
};
// - 调用cropper方法，创建剪裁区
$image.cropper(option);

// 点击切换图片
$('button:contains("选择封面")').click(function () {
  $('#file').trigger('click');
});

// 更换图片
$('#file').change(function () {
  if (this.files.length > 0) {
    var fileObj = this.files[0];
    var url = URL.createObjectURL(fileObj);
    $image.cropper('replace', url);
  }
});

// 表单提交
$('form').on('submit', function (e) {
  e.preventDefault()
  // 获取表单内容
  let fd = new FormData(this)

  // 获取编辑框内容
  fd.set('content', tinyMCE.activeEditor.getContent());
  // 图片剪裁添加
  let canvas = $image.cropper('getCroppedCanvas', {
    width: 400,
    height: 280
  })
  canvas.toBlob(function (blob) {
    fd.append('cover_img', blob)
    // fd.forEach((item, index) => {
    //   console.log(index, item);
    // })
    axios.post('/my/article/add', fd)
      .then(res => {
        let { status, message } = res.data
        if (status === 0) {
          layer.msg(message)
          // 添加成功，跳转到 文章列表 页面
          location.href = './list.html'
        }
      })
  })

})